<template>
  <div class="left-nac-container">
    <a-layout id="components-layout-demo-top-side">
      <a-layout-header class="header">
        <div class="logo" />
        <a-menu
          class="header-menu"
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['2']"
          :style="{ lineHeight: '60px' }"
        >
          <a-sub-menu key="sub1">
            <span slot="title" class="top-title">数控系统检测档案查询</span>
          </a-sub-menu>
        </a-menu>
        <div class="logo-container">
          <img src="../../images/header-head.png" class="logo-image" />
        </div>
        <div class="user-name">{{ phone }}</div>
        <div class="logo-container-exit" @click="handleUserExit">
          <img src="../../images/header-exit.png" class="exit-image" />
        </div>
      </a-layout-header>
      <a-layout-content style="padding: 0 0; height: 100%">
        <a-layout style="padding: 0 0; background: none; height: 100%">
          <a-layout-sider
            width="200"
            :style="{ background: '#001529', height: '100%' }"
            v-model="collapsed"
            collapsible
          >
            <a-menu theme="dark" mode="inline" :default-selected-keys="[routerName]">
              <a-menu-item  key="ncCheckList"  @click="menu('/ncCheckList')">检测信息</a-menu-item>
              <a-menu-item  key="systemSearch"  @click="menu('/systemSearch')">系统检测</a-menu-item>
              <a-sub-menu key="sub3" title="数据统计" :default-selected-keys="[7]">
                <a-menu-item key="7"  @click="menu('/dataStatistics')">
                  出货量统计
                </a-menu-item>
                <a-menu-item key="8" @click="menu('/dataTrendChart')">
                  出货量趋势图
                </a-menu-item>
              </a-sub-menu>
            </a-menu>

            <!-- <a-menu theme="dark" mode="inline" :default-selected-keys="[this.value]"> -->
            <!-- <a-sub-menu key="workOrder">
                <span slot="title"><a-icon type="snippets"/><span class="left-nav-title">工单库</span></span>
                <a-menu-item key="/mendList"  @click="menu('/mendList')">
                  <a-icon type="file-sync" class="solution" />
                  <span>我的工单</span>
                </a-menu-item>
                <a-menu-item key="/index/myWorkOrder"  @click="menu('/index/myWorkOrder')">
                  <a-icon type="file-sync" class="solution" />
                  <span>历史工单</span>
                </a-menu-item>
                <a-menu-item key="/index/areaStatistics" v-if="role === 17 || role === 18" @click="() => {menu('/index/areaStatistics')}">
                  <a-icon type="bar-chart" />
                  <span>收支统计</span>
                </a-menu-item>
              </a-sub-menu>
              
              <a-sub-menu key="workOrderService">
                <span slot="title"><a-icon type="file-protect" /><span class="left-nav-title">报单服务</span></span>
                <a-menu-item key="/repair"  @click="() => {menu('/repair?id=0')}">
                  <a-icon type="warning" />
                  <span>故障报单</span>
                </a-menu-item>
                <a-menu-item key="/researcher"  @click="() => {menu('/researcher')}">
                  <a-icon type="copy" />
                  <span>研究院报单</span>
                </a-menu-item>
              </a-sub-menu>

              <a-sub-menu key="managementService" v-if="role === 17">
                <span slot="title"><a-icon type="team" /><span class="left-nav-title">客服管理</span></span>
                <a-menu-item key="/signMap"  @click="() => {menu('/signMap')}">
                  <a-icon type="compass" />
                  <span>签到地图</span>
                </a-menu-item>
                <a-menu-item key="/deploy"  @click="() => {menu('/deploy')}">
                  <a-icon type="environment" />
                  <span>片区配置</span>
                </a-menu-item>
              </a-sub-menu>

              <a-sub-menu key="statistics" v-if="role === 17">
                <span slot="title"><a-icon type="pie-chart" /><span class="left-nav-title">统计管理</span></span>
                <a-menu-item key="/failureStatistics"  @click="menu('/failureStatistics')">
                  <a-icon type="stock" />
                  <span>故障统计</span>
                </a-menu-item>
                <a-menu-item key="/serviceStatistics"  @click="menu('/serviceStatistics')">
                  <a-icon type="radar-chart" />
                  <span>服务统计</span>
                </a-menu-item>
                <a-menu-item key="/researchOrderStatistics"  @click="menu('/researchOrderStatistics')">
                  <a-icon type="fund" />
                  <span>技术单统计</span>
                </a-menu-item>
              </a-sub-menu>

              <a-sub-menu key="productRepair">
                <span slot="title"><a-icon type="tool" /><span class="left-nav-title">产品返修</span></span>
                <a-menu-item key="/productRepair"  @click="() => {menu('/productRepair')}">
                  <a-icon type="file-done" />
                  <span>返修工单</span>
                </a-menu-item>
                <a-menu-item key="/productRepairStatistics"  @click="() => {menu('/productRepairStatistics')}">
                  <a-icon type="copy" />
                  <span>统计</span>
                </a-menu-item> -->
            <!-- <a-menu-item key="/newProductRepair"  @click="() => {menu('/newProductRepair')}">
                  <a-icon type="copy" />
                  <span>新建</span>
                </a-menu-item> -->
            <!-- <a-menu-item key="/productRepairDetail"  @click="() => {menu('/productRepairDetail')}">
                  <a-icon type="copy" />
                  <span>详情</span>
                </a-menu-item> -->
            <!-- </a-sub-menu> -->

            <!-- <a-menu-item key="/case"  @click="menu('/case')">
                <a-icon type="laptop" />
                <span>案例库</span>
              </a-menu-item> -->

            <!-- <a-sub-menu key="mouldSetting">
                <span slot="title"><a-icon type="setting" /><span class="left-nav-title">模板配置</span></span> -->
            <!-- <a-menu-item key="/assembleTemplate"  @click="menu('/index/assembleTemplate')">
                  <a-icon type="tool" />
                  <span>装配模板</span>
                </a-menu-item>
                <a-menu-item key="/assembleOrder"  @click="() => {menu('/index/assembleOrder')}">
                  <a-icon type="copy" />
                  <span>装配订单列表</span>
                </a-menu-item> -->
            <!-- </a-sub-menu> -->

            <!-- <a-menu-item key="/fault"  @click="menu('/fault')">
                <a-icon type="pie-chart" />
                <span>故障统计</span>
              </a-menu-item> -->

            <!--<template v-if="role === 17 || role === 19">
                <a-menu-item key="/district"  @click="menu('/district')">
                  <a-icon type="usergroup-add" />
                  <span>片区管理</span>
                </a-menu-item>
              </template>
              <template v-if="role === 18 || role === 20">
                <a-menu-item key="/service"  @click="menu('/service')">
                  <a-icon type="user-add" />
                  <span>客服管理</span>
                </a-menu-item>
              </template>-->
            <!-- </a-menu> -->
          </a-layout-sider>
          <a-layout-content
            :style="{ padding: '0 0', minHeight: '280px', height: '100%' }"
          >
            <router-view></router-view>
          </a-layout-content>
        </a-layout>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
// import { mapState, mapMutations } from 'vuex'
import api from "@/server/userConfig";

import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("menu/");
const { mapMutations } = createNamespacedHelpers("menu/");

export default {
  name: "Index",
  data() {
    return {
      phone: "",
      selectArray: [],
      role: 0,
      collapsed: false,
      routerName: []
    };
  },
  computed: {
    ...mapState(["value", "menuLists", "activeMenuPath"]),
    selectedKeys: function() {
      let path = this.$route.path;
      let ary = path.split("/");
      return [ary[ary.length - 1]];
    }
  },
  methods: {
    //点击菜单
    handlemenu(item) {
      // let fullpath = this.$route.fullPath;
      // let path = val.key;
      // if (val.key && path !== fullpath) {
      //   this.$router.push(path);
      //   this.selectedKeys = [];
      //   this.selectedKeys.push(path);
      // }
      console.log('item.path',item.key);
      this.$router.push({ name: item.key });
    },
    menu(router) {
      this.$router.push(router);
    },
    // // vuex中改变路由的方法;
    // ...mapMutations(["handleChangeRouter"]),
    getLocalStorageData() {
      const phone = localStorage.getItem("phone");
      if (!phone) {
        this.$router.push("/login");
      }
      this.phone = phone;
    },
    handleUserExit() {
      // 点击退出，清理缓存
      this.$Modal.confirm({
        title: "确认退出吗?",
        okText: "确 定",
        cancelText: "取 消",
        onOk: () => {
          localStorage.removeItem("phone");
          localStorage.removeItem("userInfo");
          this.$router.push("/login");
          // 将路由改到/mendList;
          // this.handleChangeRouter("/mendList");
        },
        onCancel() {}
      });
    },

    // 根据登陆的手机号获取角色id;
    async getRoleId() {
      if (this.phone !== "") {
        const res = await api.getRoleId({ phoneNumber: this.phone });
        if (res.MsgCode !== 0) {
          return;
        }
        const roleId = res.Data.ID;
        console.log(res);
        localStorage.setItem(
          "belongedDistrict",
          res.Data.primaryDepartment + " -- " + res.Data.secondDepartment
        );
        //localStorage.setItem('compid', res.Data.compid);
        let userObj = {
          compid: res.Data.compid,
          name: res.Data.name,
          userName: this.phone
        };
        localStorage.setItem("userData", JSON.stringify(userObj));
        this.role = roleId;
        // 将roleId存入vuex中;
        this.$store.dispatch("roleChange", roleId);
      }
    }
  },
  // created() {
  //   let routerPath = this.$route.path;
  //   console.log(routerPath);
  //   if (routerPath.indexOf("/case") === 0) {
  //     routerPath = "/case";
  //   }
  //   if (routerPath.indexOf("/clientDetail") === 0) {
  //     routerPath = "/mendList";
  //   }
  //   if (routerPath.indexOf("/saleDetail") === 0) {
  //     routerPath = "/mendList";
  //   }
  //   if (routerPath.indexOf("/mendList/new") === 0) {
  //     routerPath = "/mendList";
  //   }
  //   if (routerPath.indexOf("/finishDetail") === 0) {
  //     routerPath = "/finish";
  //   }
  //   if (routerPath.indexOf("/repair") === 0) {
  //     routerPath = "/repair";
  //   }
  //   this.handleChangeRouter(routerPath);
  // },
  mounted() {
    // 获取缓存的值;
    this.getLocalStorageData();
    // this.getRoleId();
  },
  created(){
    this.routerName = this.$route.name
  }
};
</script>

<style lang="css" scoped>
@import "./components/style.css";
</style>
